<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { momentsDetail, momentsRemind, momentsSyncs, momentsSync } from '@/api'
import { ElMessage } from 'element-plus'
const nowTime = ref('')
const router = useRouter()
const route = useRoute()
const loading = ref(false)
const isloading = ref(false)
const tipsTitle = ref('可手动点击“同步”按钮获取最新企微朋友圈发布情况哦～')
const typeObj = {
	0: '全部',
	1: '企业发表',
	2: '个人发表'
}
const detailsFrom = ref({
	staff_list: []
})
const back = () => {
	router.back()
}
const closeDialog = () => {
	dialogVisible.value = false
}
const cellClick = (row) => {
	if (row.type === 1) {
		dialogVisible.value = true
	}
}
const customerType = {
	1: '微信'
}
const dialogVisible = ref(false)
const from = ref({
	staffType: 0,
	name: ''
})
const radioList = [
	{
		id: 0,
		text: '全部发送成员'
	},
	{
		id: 1,
		text: '已发送成员'
	},
	{
		id: 2,
		text: '未发送成员'
	}
]
const timeToStr = () => {
	let timestamp = Date.now()
	var date = new Date(timestamp)
	var Y = date.getFullYear() + '-'
	var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
	var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
	var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
	var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
	var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
	return Y + M + D + h + m + s
}
const tabList = ref([])
const Refresh = async () => {
	let data = null
	const activeKey = route.query.activeKey
	isloading.value = true
	tipsTitle.value = '正在同步中，可能需要较长时间，请耐心等待'
	if (activeKey == '1') {
		data = await momentsSyncs()
	} else {
		data = await momentsSync()
	}
	if (data.status === 'success') {
		ElMessage.success(data.msg)
	} else {
		ElMessage.error(data.msg)
	}
	nowTime.value = timeToStr()
	isloading.value = false
	tipsTitle.value = '可手动点击“同步”按钮获取最新企微朋友圈发布情况哦～'
}
const searchName = () => {
	detailsFrom.value.staff_list = tabList.value.filter((item) => {
		return item.staff.name.includes(from.value.name)
	})
}
const changeList = (val) => {
	if (val === 0) {
		detailsFrom.value.staff_list = tabList.value
	} else {
		detailsFrom.value.staff_list = tabList.value.filter((item) => {
			return item.type === val
		})
	}
}
const remindAll = async () => {
	if (detailsFrom.value.staff_list.length > 0) {
		const data = await momentsRemind({
			id: detailsFrom.value.id
		})
		if (data.status === 'success') {
			getDetails()
			ElMessage.success(data.msg)
		} else {
			ElMessage.error(data.msg)
		}
	}
}
const sedRemind = async (row) => {
	const data = await momentsRemind({
		id: detailsFrom.value.id,
		userid: row.staff.userid
	})
	if (data.status === 'success') {
		getDetails()
		ElMessage.success(data.msg)
	} else {
		ElMessage.error(data.msg)
	}
}
const exportExcel = async () => {
	if (detailsFrom.value.staff_list.length > 0) {
		const link = document.createElement('a')
		link.style.display = 'none'
		//设置连接
		if (from.value.staffType == 0) {
			link.href = `/wework/user/moments/downexcel?id=${detailsFrom.value.id}`
		} else {
			link.href = `/wework/user/moments/downexcel?id=${detailsFrom.value.id}&type=${from.value.staffType}`
		}

		link.download = '成员详情'
		document.body.appendChild(link)
		//模拟点击事件
		link.click()
	}
}
const getDetails = async () => {
	const data = await momentsDetail({
		id: route.query.id,
		type: route.query.type
	})
	if (data.data != 'error') {
		tabList.value = JSON.parse(JSON.stringify(data.data.staff_list))
		detailsFrom.value = data.data
	}
}
onBeforeMount(() => {
	getDetails()
	nowTime.value = timeToStr()
})
</script>
<template>
	<div class="container">
		<el-scrollbar max-height="100%">
			<div class="heaeder">
				<div @click="back" class="back">
					<el-icon style="margin-right: 5px"><Back /></el-icon> 朋友圈详情
				</div>
			</div>
			<div class="top-card">
				<h4 class="card-title">朋友圈详情</h4>
				<div>
					<div v-if="detailsFrom.type" class="info-wrap">
						<div class="basic-info">
							<div class="form-item">
								<div class="label">朋友圈类型：</div>
								<div class="content">{{ typeObj[detailsFrom.type] }}</div>
							</div>
							<div class="form-item">
								<div class="label">发送方式：</div>
								<div class="content">{{ detailsFrom.send_status === 1 ? '立即发送' : '定时发送' }}</div>
							</div>
							<div class="form-item">
								<div class="label">创建时间：</div>
								<div class="content">{{ detailsFrom.ctime }}</div>
							</div>
							<!-- <div class="form-item">
								<div class="label">创建人：</div>
								<div class="content">
									<div class="ame-staff-tag">
										<el-icon class="people-icon"><UserFilled /></el-icon>
										<span>{{ detailsFrom.staff_list[0].staff.name }}</span>
									</div>
								</div>
							</div>
							<div class="form-item">
								<div class="label">创建人部门：</div>
								<div class="content">
									<el-tooltip effect="light" placement="top">
										<template #content> <div class="tooltips">东风文化传媒有限公司</div> </template>
										东风文化传媒有限公司
									</el-tooltip>
								</div>
							</div> -->
							<div class="form-item" style="align-items: flex-start">
								<div class="label">可见客户：</div>
								<div class="content target-user-content">
									<div class="target-staff">
										<div class="member-item" v-for="item in detailsFrom.staff_list" :key="item.id">
											<img :src="item.staff.avatar" class="avatar-img" />
											<span class="qw-open-data __qwOpenData__" style=""> {{ item.staff.name }}</span>
										</div>
									</div>
									<p style="margin-top: 12px">
										共 {{ detailsFrom.staff_list.length }} 个账号满足可见条件（全部客户）中的
										{{ detailsFrom.customer_szie }}个客户
									</p>
								</div>
							</div>
						</div>
						<div class="moment-wrap">
							<div class="form-item">
								<div class="label">任务名称：</div>
								<div class="content">{{ detailsFrom.name ? detailsFrom.name : '-' }}</div>
							</div>
							<div class="form-item" style="align-items: flex-start">
								<div class="label">内容：</div>
								<div class="content target-user-content">
									<div style="padding-top: 0" class="wechat-moment">{{ detailsFrom.text }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="top-card">
					<h4 class="card-title">
						发送成员详情 
						<!-- <el-divider direction="vertical" />
						<el-tooltip effect="light" placement="top-start">
							<template #content>
								<p>
									<el-icon v-show="isloading" class="loading"><Loading /></el-icon>
									{{ tipsTitle }}
								</p>
							</template>
							<div class="card-refresh" @click="Refresh">
								<MyIcon class="icon-refresh" name="Refresh" />
								<span>同步</span>
							</div>
						</el-tooltip>
						<el-divider direction="vertical" />
						<p class="card-refresh">上次同步时间：{{ nowTime }}</p> -->
					</h4>
					<div class="statistic-box">
						<div class="statistic-wrap">
							<div class="statistic-content">
								<h2>{{ detailsFrom.send_size }}</h2>
								<p>
									全部发送人员
									<el-tooltip content="管理员创建【企业微信朋友圈】时选择的企业成员" placement="top" effect="light">
										<MyIcon class="total-question" name="Question" />
									</el-tooltip>
								</p>
							</div>
							<el-divider direction="vertical" />
							<div class="statistic-content">
								<h2>{{ detailsFrom.yes_send }}</h2>
								<p>
									已发送成员
									<el-tooltip content="已发送该条朋友圈的企业成员" placement="top" effect="light">
										<MyIcon class="total-question" name="Question" />
									</el-tooltip>
								</p>
							</div>
							<el-divider direction="vertical" />
							<div class="statistic-content">
								<h2>{{ detailsFrom.not_send }}</h2>
								<p>
									未发送成员
									<el-tooltip content="未发送该条朋友圈的企业成员" placement="top" effect="light">
										<MyIcon class="total-question" name="Question" />
									</el-tooltip>
								</p>
							</div>
						</div>
						<div class="statistic-wrap" style="margin-left: 32px">
							<div class="statistic-content" style="width: 169px; flex-basis: 100%">
								<h2>{{ detailsFrom.customer_szie }}</h2>
								<p>
									已送达客户
									<el-tooltip
										content="成员确认发表朋友圈后，可在微信朋友圈中看到该条朋友圈的客户列表"
										placement="top"
										effect="light"
									>
										<MyIcon class="total-question" name="Question" />
									</el-tooltip>
								</p>
							</div>
						</div>
					</div>
					<div class="tab-list">
						<el-radio-group @change="changeList" v-model="from.staffType">
							<el-radio-button v-for="item in radioList" :key="item.text" :label="item.id">{{
								item.id === from.staffType ? `${item.text}（${detailsFrom.staff_list.length}）` : item.text
							}}</el-radio-button>
						</el-radio-group>
					</div>
					<div class="top-bar">
						<el-input
							style="width: 216px; height: 36px"
							v-model="from.name"
							class="w-50 m-2"
							placeholder="请输入要搜索的群名称"
							:suffix-icon="Search"
							@keyup.enter="searchName"
						/>
						<div>
							<el-button
								@click="exportExcel"
								:disabled="detailsFrom.staff_list.length === 0"
								class="primary-btn"
								type="primary"
								plain
								>导出Excel</el-button
							>
							<el-button
								v-show="from.staffType === 2"
								:disabled="detailsFrom.staff_list.length === 0"
								class="primary-btn"
								type="primary"
								@click="remindAll"
								>提醒全部成员</el-button
							>
						</div>
					</div>
					<el-table
						@cell-click="cellClick"
						border
						v-loading="loading"
						:data="detailsFrom.staff_list"
						style="width: 100%"
					>
						<el-table-column label="员工">
							<template #default="scope">
								<div class="table-avatar">
									<img :src="scope.row.staff.avatar" alt="" />
									<span>{{ scope.row.staff.name }}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="员工发表状态">
							<template #default="scope">
								<el-tag style="color: #595959" v-show="scope.row.type" class="ml-2" type="success">已发送</el-tag>
								<el-tag v-show="!scope.row.type" class="ml-2" type="danger">未发送</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="发送时间" prop="create_time" />
						<el-table-column label="已送达客户">
							<template #default="scope">
								<div @click="cellClick" class="customer-num">{{ scope.row.customer_szie }}</div>
							</template>
						</el-table-column>
						<el-table-column width="80" label="操作">
							<template #default="scope">
								<el-tooltip effect="light" content="群主已点击「前往发送」，暂不支持提醒哦" placement="top-end">
									<span v-show="scope.row.type" class="send">提醒发送</span>
								</el-tooltip>
								<span v-show="!scope.row.type" @click="sedRemind(scope.row)" class="send-now">提醒发送</span>
							</template>
						</el-table-column>
						<template #empty>
							<div class="table-empty">
								<img src="../../../../assets/img/img/list-empty.499dbb25961c.png" alt="" />
								<p>还没有相关成员哦～</p>
							</div>
						</template>
					</el-table>
				</div>
			</div>
		</el-scrollbar>
		<!-- 送达客户的弹窗 -->
		<el-dialog :center="true" v-model="dialogVisible" title="已送达客户" width="40%" @close="closeDialog">
			<div class="customer-list">
				<div v-for="item in detailsFrom.staff_list" :key="item.id" class="customer-item">
					<img :src="item.staff.avatar" alt="" />
					<p>
						<span>{{ item.staff.name }}</span>
						<span class="type">@{{ customerType[item.type] }}</span>
					</p>
				</div>
			</div>
			<template #footer> </template>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
@import '@/assets/style/groupManagement/friendsDetails.scss';
</style>
